/**
*
*/
<template>
  <div>
    <!-- 面包屑导航 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>{{formInline&&formInline.is_technical == 1 ? '技术反馈列表记录' : '反馈列表'}}</el-breadcrumb-item>
    </el-breadcrumb>
    <NoPermission
      v-if="!authFilter(permissionObj, 'index')">
    </NoPermission>

    <div v-else>
      <!--添加搜索框-->
      <el-form :inline="true" :model="formInline" class="mgt16">
        <BaseSearch :formItemList="formItemList" @search="search">
          <div
            class="disib"
            slot="formButton">
            <el-form-item>
              <el-button
                type="primary"
                size="small"
                @click="advancedSearch">
                添加搜索框
              </el-button>
              <el-button
                size="small"
                type="primary"
                @click="routerPush('/feedback/labelSetting?fromPage=feedbackList&labelTitle='
                +(formInline&&formInline.is_technical == 1 ? '技术反馈列表记录' : '反馈列表')
                +'&labelPath='
                +(formInline&&formInline.is_technical == 1 ? '/feedback/technicalFeedbackeedback' : '/feedback/feedbackList'))"
                v-if="authFilter(permissionObj, 'label')">标签设置</el-button>
            </el-form-item>
          </div>
        </BaseSearch>
      </el-form>
      <!-- 搜索筛选 -->
      <el-form
        v-if="false"
        :inline="true"
        :model="formInline"
        class="mgt16">
        <el-form-item label="" prop="brand" label="搜索：">
          <el-select size="small" v-model="formInline.brand" placeholder="品牌" clearable
                     filterable>
            <el-option v-for="type in brandList" :label="type.label" :value="type.label" :key="type.type"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label=""  prop="model">
          <el-select size="small" v-model="formInline.model" placeholder="型号" clearable
                     filterable>
            <el-option v-for="type in modelList" :label="type.label" :value="type.label" :key="type.type"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="" prop="type">
          <el-select size="small" v-model="formInline.type" placeholder="反馈分类" clearable
                     filterable>
            <el-option v-for="type in typeList" :label="type.label" :value="type.type" :key="type.type"></el-option>
          </el-select>
        </el-form-item>
        <!--        <el-form-item label=""  prop="channel">-->
        <!--          <el-select size="small" v-model="formInline.channel" placeholder="渠道" clearable>-->
        <!--            <el-option v-for="type in channelList" :label="type.label" :value="type.label" :key="type.type"></el-option>-->
        <!--          </el-select>-->
        <!--        </el-form-item>-->
        <!--        <el-form-item prop="imei">-->
        <!--          <el-input size="small" v-model="formInline.imei" placeholder="请输入imei" clearable></el-input>-->
        <!--        </el-form-item>-->
        <el-form-item prop="email">
          <el-input size="small" v-model="formInline.email" placeholder="请输入邮箱" clearable></el-input>
        </el-form-item>
        <el-form-item>
          <el-button size="small" type="primary" icon="el-icon-search" @click="search">搜索</el-button>
          <el-button
            size="small"
            type="primary"
            @click="routerPush('/feedback/labelSetting?fromPage=feedbackList&labelTitle='
              +(formInline&&formInline.is_technical == 1 ? '技术反馈列表记录' : '反馈列表')
              +'&labelPath='
              +(formInline&&formInline.is_technical == 1 ? '/feedback/technicalFeedbackeedback' : '/feedback/feedbackList'))"
            v-if="authFilter(permissionObj, 'label')">标签设置</el-button>
        </el-form-item>
      </el-form>
      <!--列表-->
      <div class="relative">
        <table-top
          :refCustom="refCustom"
          :sheetLast="sheetLast"
          :formInline="formInline"
          :exportExcelInfo="exportExcelInfo"
          :exportExcelArray="exportExcelArray"
          :exportExcelHead="exportExcelHead"
          :multipleSelection="multipleSelection"
          :exportExcelRequest="exportExcelRequest"
          :showSummary="showSummary"
          :summaryList="summaryList"
          :isSubtotal="isSubtotal"
          :mergeCells="mergeCells"
          :mergeName="mergeName"
          :showRedList="showRedList"
          :showGreenList="showGreenList"
          :showOrangeList="showOrangeList"
          :customColor="customColor"
          :customGreen="customGreen"
          :customOrange="customOrange"
          :showCheck="authFilter(permissionObj, 'excelExportCheck')"
          :showResult="authFilter(permissionObj, 'excelExportResult')"
          @onSuccess="onSuccess">
          <template slot="left">
            <el-button
              size="small" type="primary" icon="el-icon-position"
              @click="quickReplyEdit({},'批量快捷回复')"
              v-if="authFilter(permissionObj, 'batchQuickReply')">
              批量快捷回复
            </el-button>
            <el-button
              size="small"
              type="primary"
              icon="el-icon-setting"
              plain
              @click="showColumnOption"
              v-if="authFilter(permissionObj, 'configureColumns')">
              配置列
            </el-button>
          </template>
        </table-top>
        <div class="relative">
          <el-table
            :header-cell-style="{'font-weight': '600', 'color':'#333'}"
            size="small"
            :data="listData"
            highlight-current-row
            v-loading="loading"
            :height="tableHeight"
            :row-height="rowHeight"
            use-virtual
            border
            element-loading-text="拼命加载中"
            style="width: 100%;"
            :show-summary="showSummary"
            :summary-method="getSummaries"
            :span-method="objectSpanMethod"
            ref="multipleTable"
            @selection-change="handleSelectionChange">
            <!--      展开行      -->
            <el-table-column type="expand"
                             v-if="false">
              <template slot-scope="scope">
                <el-form label-position="left" inline class="table-expand">
                  <el-form-item label="固件区域"
                                v-if="showColumn.firmwareArea">
                    <span>{{scope.row.firmwareArea}}</span>
                  </el-form-item>
                  <el-form-item label="固件版本"
                                v-if="showColumn.firmwareVersion">
                    <span>{{scope.row.firmwareVersion}}</span>
                  </el-form-item>
                  <el-form-item label="用户国家"
                                v-if="showColumn.userCountry">
                    <span>{{ scope.row.userCountry }}</span>
                  </el-form-item>
                  <el-form-item label="手机号码"
                                v-if="showColumn.phone">
                    <span>{{ scope.row.phone }}</span>
                  </el-form-item>
                  <el-form-item label="提问时间"
                                v-if="showColumn.questionTime">
                    <span>{{scope.row.questionTime|timestampToDay}}</span>
                  </el-form-item>
                  <el-form-item label="回复时间"
                                v-if="showColumn.updateTime">
                    <span>{{scope.row.updateTime|timestampToDay}}</span>
                  </el-form-item>
                  <!--                  <el-form-item label="提问内容"-->
                  <!--                                v-if="showColumn.problem">-->
                  <!--                    <span>{{ scope.row.problem }}</span>-->
                  <!--                  </el-form-item>-->
                  <el-form-item label="回复人"
                                v-if="showColumn.processor">
                    <span>{{ scope.row.processor }}</span>
                  </el-form-item>
                  <el-form-item label="邮箱"
                                v-if="showColumn.email">
                    <span>{{ scope.row.email }}</span>
                  </el-form-item>
                </el-form>
              </template>
            </el-table-column>
            <el-table-column
              prop="selection"
              align="center"
              type="selection"
              width="40">
            </el-table-column>
            <el-table-column align="center" prop="id" label="问题ID" min-width="60px"
                             v-if="showColumn.id">
            </el-table-column>
            <!--            <el-table-column align="center" prop="imei" label="imei" min-width="100px">-->
            <!--              <template slot-scope="scope">-->
            <!--                <el-tooltip class="item curPer" effect="light" :content="scope.row.imei" placement="top">-->
            <!--                  <div class="ell blue-color">-->
            <!--                    {{scope.row.imei}}-->
            <!--                  </div>-->
            <!--                </el-tooltip>-->
            <!--              </template>-->
            <!--            </el-table-column>-->
            <!--            <el-table-column align="center" prop="email" label="邮箱" min-width="100px">-->
            <!--            </el-table-column>-->
            <el-table-column align="center" prop="brand" label="品牌" min-width="60px"
                             v-if="showColumn.brand">
            </el-table-column>
            <el-table-column align="center" prop="model" label="型号" min-width="100px"
                             v-if="showColumn.model">
            </el-table-column>
            <el-table-column align="center" prop="sn" label="SN" min-width="144px"
                             v-if="showColumn.sn">
            </el-table-column>
            <el-table-column align="center" prop="customFields.sn1" label="SN2" min-width="144px"
                             v-if="showColumn.sn1">
            </el-table-column>
            <el-table-column align="center" prop="module" label="模块" min-width="100px"
                             v-if="showColumn.module">
            </el-table-column>
            <el-table-column align="center" prop="customFields.firmwareArea" label="固件区域" min-width="110px"
                             v-if="showColumn.firmwareArea">
            </el-table-column>
            <el-table-column align="center" prop="customFields.firmwareVersion" label="固件版本" min-width="110px"
                             v-if="showColumn.firmwareVersion">
            </el-table-column>
            <el-table-column align="center" prop="customFields.userCountry" label="用户国家" min-width="100px"
                             v-if="showColumn.userCountry">
            </el-table-column>
            <el-table-column align="center" prop="customFields.phone" label="手机号码" min-width="100px"
                             v-if="showColumn.phone">
            </el-table-column>
            <el-table-column align="center" prop="customFields.email" label="邮箱" min-width="120px"
                             v-if="showColumn.email">
            </el-table-column>
            <el-table-column align="center" prop="questionTime" label="提问时间" min-width="80px"
                             v-if="showColumn.questionTime">
              <template slot-scope="scope">
                <div>{{scope.row.questionTime|timestampToDay}}</div>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="updateTime" label="回复时间" min-width="80px"
                             v-if="showColumn.updateTime">
              <template slot-scope="scope">
                <div>{{scope.row.updateTime|timestampToDay}}</div>
              </template>
            </el-table-column>
            <!--            <el-table-column align="center" prop="channel" label="渠道" min-width="80px">-->
            <!--            </el-table-column>-->
            <el-table-column align="center" prop="consultationStatus" label="处理状态" min-width="70px"
                             v-if="showColumn.consultationStatus">
              <template slot-scope="scope">
                <div
                  :class="{'colorf2':scope.row.showEd,'greenColor':scope.row.showGreen}">
                  {{scope.row.consultationStatus}}
                </div>
              </template>
            </el-table-column>
            <el-table-column align="center" prop="typeName" label="反馈分类" min-width="70px"
                             v-if="showColumn.typeName">
            </el-table-column>
            <el-table-column align="center" prop="processor" label="回复人" min-width="80px"
                             v-if="showColumn.processor">
            </el-table-column>

            <el-table-column
              align="center"
              label="操作"
              :min-width="operaWidth">
              <template slot-scope="scope"
                        v-if="listData&&listData.length>0">
                <el-button
                  size="mini"
                  type="primary"
                  @click="handleEdit(scope.row)"
                  v-if="authFilter(permissionObj, 'update')">
                  回复
                </el-button>
                <!--                <el-button-->
                <!--                  size="mini"-->
                <!--                  type="primary"-->
                <!--                  @click="quickReplyEdit(scope.row,'快捷回复')"-->
                <!--                  v-if="authFilter(permissionObj, 'quickReply')">-->
                <!--                  快捷回复-->
                <!--                </el-button>-->
                <template
                  class="mgl10"
                  v-if="(authFilter(permissionObj, 'turnTechnical')&&scope.row.is_technical=='0')||
                    (authFilter(permissionObj, 'turnProblem')&&scope.row.isBecoming=='N')">
                  <el-dropdown class="pdl10">
                  <span class="el-dropdown-link">
                    <i style="cursor:pointer;"
                       class="iconfont icon-chakan img28 color9e"></i>
                  </span>
                    <el-dropdown-menu
                      class="tac"
                      slot="dropdown">
                      <el-dropdown-item
                        @click.native="turnProblem(scope.row)"
                        v-if="authFilter(permissionObj, 'turnProblem')&&scope.row.isBecoming=='N'">
                        <div
                          class="success">
                          转为常见
                        </div>
                      </el-dropdown-item>
                      <el-dropdown-item
                        class="color"
                        @click.native="turnTechnical(scope.row)"
                        v-if="authFilter(permissionObj, 'turnTechnical')&&scope.row.is_technical=='0'">
                        <div
                          class="success">
                          转为技术
                        </div>
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </template>
                <div v-else class="img20 disib mgl10"></div>
                <!--                <el-button-->
                <!--                  size="mini"-->
                <!--                  type="primary"-->
                <!--                  @click="handleEdit(scope.row)"-->
                <!--                  v-if="authFilter(permissionObj, 'update')">-->
                <!--                  回复-->
                <!--                </el-button>-->
                <!--                <el-button-->
                <!--                  size="mini"-->
                <!--                  type="primary"-->
                <!--                  @click="quickReplyEdit(scope.row,'快捷回复')"-->
                <!--                  v-if="authFilter(permissionObj, 'quickReply')">-->
                <!--                  快捷回复-->
                <!--                </el-button>-->
                <!--                <el-button-->
                <!--                  size="mini"-->
                <!--                  type="success"-->
                <!--                  @click="turnProblem(scope.row)"-->
                <!--                  v-if="authFilter(permissionObj, 'turnProblem')&&scope.row.isBecoming=='N'">-->
                <!--                  转为常见-->
                <!--                </el-button>-->
                <!--                <el-button-->
                <!--                  size="mini"-->
                <!--                  type="success"-->
                <!--                  @click="turnTechnical(scope.row)"-->
                <!--                  v-if="authFilter(permissionObj, 'turnTechnical')&&scope.row.is_technical=='0'">-->
                <!--                  转为技术-->
                <!--                </el-button>-->
              </template>
            </el-table-column>
          </el-table>
        </div>

      </div>
      <!-- 分页组件 -->
      <Pagination v-bind:child-msg="pageparm" @callFather="callFather"></Pagination>
    </div>

    <!-- 配置列面板 -->
    <el-drawer
      :before-close="hideColumnOption"
      :visible.sync="isShowColumn"
      direction="rtl"
      custom-class="demo-drawer"
      ref="drawer"
    >
      <template
        slot="title">
        <div
          class="flex1 w100 flex">
          <div>
            配置列面板
          </div>
          <!--          <el-checkbox-->
          <!--            class="mgl20"-->
          <!--            :indeterminate="isIndeterminate"-->
          <!--            v-model="checkAll"-->
          <!--            @change="handleCheckAllChange">-->
          <!--            全选-->
          <!--          </el-checkbox>-->
        </div>
      </template>
      <div class="demo-drawer__content pd20 box-b flex column h100">
        <el-form class="flex1 w100 disb edit-class">
          <div class="body">
            <el-checkbox class="mgb20 minw80" v-model="checkList.id">问题ID</el-checkbox>
            <el-checkbox class="mgb20 minw80" v-model="checkList.brand">品牌</el-checkbox>
            <el-checkbox class="mgb20 minw80" v-model="checkList.sn">SN</el-checkbox>
            <el-checkbox class="mgb20 minw80" v-model="checkList.sn1">SN2</el-checkbox>
            <el-checkbox class="mgb20 minw80" v-model="checkList.module">模块</el-checkbox>
            <el-checkbox class="mgb20 minw80" v-model="checkList.firmwareArea">固件区域</el-checkbox>
            <el-checkbox class="mgb20 minw80" v-model="checkList.firmwareVersion">固件版本</el-checkbox>
            <el-checkbox class="mgb20 minw80" v-model="checkList.userCountry">用户国家</el-checkbox>
            <el-checkbox class="mgb20 minw80" v-model="checkList.phone">手机号码</el-checkbox>
            <el-checkbox class="mgb20 minw80" v-model="checkList.email">邮箱</el-checkbox>
            <el-checkbox class="mgb20 minw80" v-model="checkList.questionTime">提问时间</el-checkbox>
            <el-checkbox class="mgb20 minw80" v-model="checkList.updateTime">回复时间</el-checkbox>
            <el-checkbox class="mgb20 minw80" v-model="checkList.consultationStatus">处理状态</el-checkbox>
            <el-checkbox class="mgb20 minw80" v-model="checkList.typeName">反馈分类</el-checkbox>
            <el-checkbox class="mgb20 minw80" v-model="checkList.processor">回复人</el-checkbox>
            <!--            <el-checkbox class="mgb20 minw80" v-model="checkList.problem">提问内容</el-checkbox>-->
          </div>
        </el-form>
        <div class="demo-drawer__footer flex w100">
          <el-button class="flex1 flex-box" @click="hideColumnOption">取 消</el-button>
          <el-button
            class="flex1 flex-box mgl20"
            type="primary"
            @click="saveColumn" :loading="loading">
            {{ loading ? '提交中 ...' : '保存列配置' }}
          </el-button>
        </div>
      </div>
    </el-drawer>

    <!-- 回复弹框界面 -->
    <el-dialog
      :title="title"
      :visible.sync="editFormVisible"
      width="80%"
      @close="closeDialog('editForm')"
      style="margin-left: 200px;">
      <el-form
        :label-width="title == '快捷回复' ? '80px' : '120px'"
        :model="editForm"
        :rules="rules"
        ref="editForm">
        <el-row>
          <el-col :span="24">
            <el-form-item
              :label="title"
              prop="content">
              <AutoCompleteCustom
                v-if="editFormVisible"
                size="small"
                class="w100"
                placeholder="请输入快捷回复内容"
                :restaurants="contentList"
                :state="editForm.content"
                @handleSelect="handleSelect">
              </AutoCompleteCustom>
              <!--  回复插件 -->
              <!--              <v-selectpage-->
              <!--                ref="selectpageRefs"-->
              <!--                title="快捷回复"-->
              <!--                placeholder="请选择快捷回复内容"-->
              <!--                :data="dataService"-->
              <!--                key-field="label"-->
              <!--                search-field="label"-->
              <!--                show-field="label"-->
              <!--                v-model="editForm.content"-->
              <!--                :pageSize="formReplay.pagenum"-->
              <!--                :pageNumber="formReplay.page"-->
              <!--                :params="formReplay"-->
              <!--                :result-format="resultFormat"-->
              <!--                @values="handelSingleValues">-->
              <!--              </v-selectpage>-->
            </el-form-item>
          </el-col>
          <!--          <el-col :span="12">-->
          <!--          </el-col>-->
        </el-row>
        <el-row>
          <el-col :span="12">
            <el-form-item
              label="上传图片"
              prop="imagesList">
              <c-upload-sec
                ref="uploadSec"
                :deleteServe="true"
                class="flex1"
                accept=".png, .jpg, .jpeg"
                imgClass="img50"
                v-model="editForm.imagesList"
                :max="9"
                :filename="filename"
                itemStyles="width: 50px;height: 50px;margin: 0 8px 8px 0;"
                :previewShow="true"
                @complete="getPhoto">
              </c-upload-sec>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item
              label="上传视频"
              prop="imagesList">
              <c-upload-slice
                ref="uploadSlice"
                class="flex1"
                imgClass="img50"
                accept=".mp4,.m2v,.mkv"
                v-model="editForm.videosList"
                :max="9"
                :filename="filename"
                @complete="getVideos">
              </c-upload-slice>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog('editForm')">取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('editForm')">保存</el-button>
      </div>
    </el-dialog>

    <!-- 添加搜索框弹框界面 -->
    <el-dialog
      :title="title"
      :visible.sync="editFormVisibleAdvanced"
      width="30%"
      @close="closeDialog('editAdvanced')"
      style="margin-left: 200px;">
      <el-form
        class="edit-class"
        label-width="80px"
        :model="editAdvanced"
        :rules="rulesAdvanced"
        ref="editAdvanced">
        <el-form-item
          label="搜索框"
          prop="serchName">
          <el-select
            v-model="editAdvanced.serchName"
            multiple
            :multiple-limit="8"
            placeholder="请选择搜索框"
            clearable
            value-key="id">
            <el-option
              v-for="item in serchAllList"
              :key="item.value"
              :label="item.label"
              :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button size="small" @click="closeDialog('editAdvanced')">取消</el-button>
        <el-button size="small" type="primary" :loading="loading" class="title" @click="submitForm('editAdvanced')">保存</el-button>
      </div>
    </el-dialog>

  </div>
</template>

<script>
import Pagination from '../../components/Pagination'
// 输入建议
import AutoCompleteCustom from "@/components/AutoCompleteCustom.vue"
import TableTop from "@/components/table-top.vue"
import {mapGetters, mapState} from "vuex";
//上传excel
import UploadFile from "@/components/UploadFile.vue"
// 选择部门
import config from "@/api/config.js";
import * as dd from 'dingtalk-jsapi' // 此方式为整体加载，也可按需进行加载
import cUploadSec from '@/components/c-upload-sec';
import cUploadSlice from '@/components/c-upload-slice';
// 添加搜索框
import BaseSearch from "@/components/BaseSearch.vue";

import reportMin from "@/views/tatisticalReport/tatisticalReport.js"
export default {
  // 注册组件
  components: {
    Pagination,
    AutoCompleteCustom,
    TableTop,
    UploadFile,
    cUploadSec,
    cUploadSlice,
    // 添加搜索框
    BaseSearch,
  },
  mixins:[reportMin],
  data() {
    return {
      loading: false, //是显示加载
      editFormVisible: false, //控制编辑页面显示与隐藏
      title: '',
      editForm: {
        id: '',
        content: '',
        imagesList: [],
        videosList: [],
        processor:'',
        isReply: 1,
        // ids: null,
        // consultationStatus: '已回复',
      },
      // rules表单验证
      rules: {
        // content: [{ required: true, message: '请输入回复内容', trigger: 'blur' }],
        content: [{ required: true, message: '请输入回复内容', trigger: 'change' }],
      },
      formInline: {
        page: 1,
        pagenum: 30,
        type: '',
        email: '',
        brand: '',
        model: '',
        //客服反馈: 0 技术反馈: 1
        is_technical: 1,
        sn: '',
        sn1: '',
        firmwareArea: '',
        firmwareVersion: '',
        userCountry: '',
        phone: '',
        questionTime: '',
        updateTime: '',
        consultationStatus: '',
        processor: '',
        // channel: '',
        // imei: '',
      },
      contentList: [],
      brandList: [],
      modelList: [],
      channelList: [],
      typeList: [
        {
          type: 1,
          value: 1,
          label: '问题',
        },
        {
          type: 2,
          value: 2,
          label: '使用建议',
        }
      ],
      listData: [], //用户数据
      // 分页参数
      pageparm: {
        currentPage: 1,
        pageSize: 30,
        total: 30
      },
      // 虚拟列表 start
      rowHeight: 40,
      tableHeight: window.innerHeight - 302,
      // tableHeight: document.documentElement.clientHeight - 254, // 表的高度
      // 虚拟列表 end
      // 导出表格start
      // 是否合并小格
      mergeCells: false,
      //合并表格名称
      mergeName: 'id',
      // 导出自定义字体颜色所属字段
      showRedList: ['是','未回答'],
      showGreenList: ['已回复'],
      showOrangeList: ['处理中'],
      // 导出自定义字体颜色
      customColor: 'D63640',
      customGreen: '1AD96F',
      customOrange: 'f2b400',
      // 是否小计
      isSubtotal: false,
      // 是否显示统计
      showSummary: false,
      // 统计字段列表
      summaryList: ['balance'],
      // 表格列最后一列，有边框样式，手动去掉
      sheetLast: '',
      // 导出数据接口
      exportExcelRequest:'feedbackList',
      //导出表格字段及formatter信息
      exportExcelArray: [
        {
          prop: 'id',
          label: '问题ID',
          formatterFlag: false,
          align: 'center',
        },
        // {
        //   prop: 'imei',
        //   label: 'imei',
        //   formatterFlag: false,
        //   align: 'center',
        // },
        // {
        //   prop: 'email',
        //   label: '邮箱',
        //   formatterFlag: false,
        //   align: 'center',
        // },
        {
          prop: 'brand',
          label: '品牌',
          formatterFlag: false
          // formatterFlag: true,
          // formatterType: 'common-type',
          // formatterInfo: this.brandList
        },
        {
          prop: 'model',
          label: '型号',
          formatterFlag: false
        },

        {
          prop: 'sn',
          label: 'SN',
          formatterFlag: false
        },
        {
          prop: 'customFields.sn1',
          label: 'SN1',
          formatterFlag: false
        },
        {
          prop: 'customFields.firmwareArea',
          label: '固件区域',
          formatterFlag: true,
          formatterType: 'common-type',
        },
        {
          prop: 'customFields.firmwareVersion',
          label: '固件版本',
          formatterFlag: true,
          formatterType: 'common-type',
        },
        {
          prop: 'customFields.userCountry',
          label: '用户国家',
          formatterFlag: true,
          formatterType: 'common-type',
        },
        {
          prop: 'customFields.phone',
          label: '手机号码',
          formatterFlag: true,
          formatterType: 'common-type',
        },
        {
          prop: 'customFields.email',
          label: '邮箱',
          formatterFlag: true,
          formatterType: 'common-type',
        },

        {
          prop: 'questionTime',
          label: '提问时间',
          formatterFlag: true,
          formatterType: 'time-type',
        },
        {
          prop: 'updateTime',
          label: '回复时间',
          formatterFlag: true,
          formatterType: 'time-type'
        },
        {
          prop: 'processor',
          label: '回复人',
          formatterFlag: false
        },
        // {
        //   prop: 'channel',
        //   label: '渠道',
        //   formatterFlag: false,
        //   align: 'center',
        // },
        {
          prop: 'type',
          label: '反馈分类',
          // formatterFlag: false,
          formatterFlag: true,
          formatterType: 'common-type',
          formatterInfo: [
            {
              type: 1,
              value: 1,
              label: '问题',
            },
            {
              type: 2,
              value: 2,
              label: '使用建议',
            }
          ]
        },
        {
          prop: 'consultationStatus',
          label: '处理状态',
          formatterFlag: false
        },

      ],
      // 导出excel表格宽高列表
      exportExcelHead:[
        { wpx: 120, wch: 20 },
        // { wpx: 120, wch: 20 },
        // { wpx: 180, wch: 20 },
        { wpx: 120, wch: 20 },
        { wpx: 120, wch: 20 },
        { wpx: 160, wch: 20 },
        { wpx: 160, wch: 20 },
        { wpx: 120, wch: 20 },
        { wpx: 120, wch: 20 },
        { wpx: 120, wch: 20 },
        { wpx: 120, wch: 20 },
        { wpx: 120, wch: 20 },
        { wpx: 120, wch: 20 },
        { wpx: 120, wch: 20 },
        { wpx: 120, wch: 20 },
        // { wpx: 120, wch: 20 },
        { wpx: 120, wch: 20 },
      ],
      //导出excel表格id及excel名称
      exportExcelInfo: {
        excelId: 'Lend',
        excelName: '反馈列表记录.xlsx',
      },
      //需要导出的table的选择数据
      multipleSelection: [],
      refCustom: 'myChild',

      //自定义输入插件
      dataService: config.baseUrl+'api/quickreply/quickreplyList',
      formReplay: {
        pagenum: 10,
        page: 1,
        fromUrl: 'doc'
      },
      filename:'reply',

      // 添加搜索框
      editFormVisibleAdvanced: false,
      serchAllList: [],
      // serchAllList: [
      //   {
      //     label: "品牌",
      //     value: "brand",
      //     formLabel: '',
      //     type: "select",
      //     selectOptions: [],
      //     param: "brand",
      //     placeholder: '请选择品牌',
      //   },
      //   {
      //     label: "型号",
      //       value: "model",
      //     formLabel: '',
      //     type: "select",
      //     selectOptions: [],
      //     param: "model",
      //     placeholder: '请选择型号',
      //   },
      //   {
      //     label: "反馈分类",
      //       value: "type",
      //     formLabel: '',
      //     type: "select",
      //     selectOptions: [],
      //     param: "type",
      //     placeholder: '请选择反馈分类',
      //   },
      //   {
      //     label: "处理状态",
      //       value: "consultationStatus",
      //     formLabel: '',
      //     type: "select",
      //     selectOptions: [],
      //     param: "consultationStatus",
      //     placeholder: '请选择处理状态',
      //   },
      //   {
      //     label: "邮箱",
      //       value: "email",
      //     formLabel: '',
      //     type: "input",
      //     param: "email",
      //     placeholder: '请输入邮箱',
      //   },
      //   {
      //     label: "提问时间",
      //       type: "daterange",
      //     param: "questionTime",
      //     value: "questionTime",
      //     startPlaceholder: "提问开始时间",
      //     endPlaceholder: "提问结束时间",
      //     placeholder: '请选择提问时间',
      //   },
      //   {
      //     label: "回复时间",
      //       type: "daterange",
      //     param: "updateTime",
      //     value: "updateTime",
      //     startPlaceholder: "回复开始时间",
      //     endPlaceholder: "回复结束时间",
      //     placeholder: '请选择回复时间',
      //   },
      //   {
      //     label: "SN",
      //       value: "sn",
      //     formLabel: '',
      //     type: "input",
      //     param: "sn",
      //     placeholder: '请输入SN',
      //   },
      //   {
      //     label: "SN2",
      //       value: "sn1",
      //     formLabel: '',
      //     type: "input",
      //     param: "sn1",
      //     placeholder: '请输入SN2',
      //   },
      //   {
      //     label: "固件区域",
      //       value: "firmwareArea",
      //     formLabel: '',
      //     type: "input",
      //     param: "firmwareArea",
      //     placeholder: '请输入固件区域',
      //   },
      //   {
      //     label: "固件版本",
      //       value: "firmwareVersion",
      //     formLabel: '',
      //     type: "input",
      //     param: "firmwareVersion",
      //     placeholder: '请输入固件版本',
      //   },
      //   {
      //     label: "用户国家",
      //       value: "userCountry",
      //     formLabel: '',
      //     type: "input",
      //     param: "userCountry",
      //     placeholder: '请输入用户国家',
      //   },
      //   {
      //     label: "手机号码",
      //       value: "phone",
      //     formLabel: '',
      //     type: "input",
      //     param: "phone",
      //     placeholder: '请输入手机号码',
      //   },
      //   {
      //     label: "回复人",
      //       value: "processor",
      //     formLabel: '',
      //     type: "input",
      //     param: "processor",
      //     placeholder: '请输入回复人',
      //   },
      //   {
      //     label: "问题ID",
      //       value: "id",
      //     formLabel: '',
      //     type: "input",
      //     param: "id",
      //     placeholder: '请输入问题ID',
      //   },
      //   // {
      //   //   label: "下拉框多选：",
      //   //   type: "select",
      //   //   selectOptions: [{ text: 111, value: 111 }, { text: 222, value: 222 }],
      //   //   multiple: true,
      //   //   param: "parm222",
      //   //   placeholder: '请选择品牌',
      //   // },
      //   // {
      //   //   label: "级联选择器",
      //   //   type: "cascader",
      //   //   param: "cascader",
      //   //   options: []
      //   // }
      // ],
      editAdvanced: {
        serchName: [],
        serchList: [],
      },
      rulesAdvanced: {
        serchList: [{ required: true, message: '请选择至少一个搜索框', trigger: 'change' }],
      },
      formItemList: [],
      // 配置列
      isShowColumn: false,
      // 列的配置化对象，存储配置信息
      checkList: {},
      showColumn: {
        id: true,
        brand: true,
        model: true,
        sn: true,
        sn1: true,
        firmwareArea: true,
        firmwareVersion: true,
        userCountry: true,
        phone: true,
        email: true,
        questionTime: true,
        updateTime: true,
        consultationStatus: true,
        typeName: true,
        processor: true,
        module: true,
        // problem: true,
      },
      //全选
      // checkAll: false,
      // isIndeterminate: true,

    }
  },
  /**
   * 数据发生改变
   */

  /**
   * 创建完毕
   */
  created() {
    const vm = this
    // vm.phonebrandsList()
    // vm.phonemodelList()
    // vm.channelListGet()
    if(vm.exportExcelInfo){
      vm.exportExcelInfo.excelName = vm.formInline.is_technical == 1 ? '技术反馈列表记录.xlsx' : '反馈列表记录.xlsx'
    }
    vm.quickreplyListGet();
    vm.feedbacksearchList()
    vm.getData(this.formInline)
  },
  computed:{
    ...mapGetters(['userAuthList', 'userInfo']),
    permissionObj(){
      if(this.userAuthList&&this.userAuthList.length>0){
        if(this.formInline.is_technical == 1){
          return this.authListFilter(this.userAuthList,'customManagement', 'technicalFeedbackeedbackList')
        }else {
          return this.authListFilter(this.userAuthList,'customManagement', 'feedbackList')
        }
      }
    },
    // 操作列表宽度
    operaWidth(){
      const vm = this
      const minWidth = 120
      // let len = vm.authFilterLen(this.permissionObj, 'update', 'turnProblem', 'quickReply', 'turnTechnical').length
      // if(vm.formInline.is_technical == 1){
      //   len = vm.authFilterLen(this.permissionObj, 'update', 'turnProblem', 'quickReply').length
      // }
      let len = vm.authFilterLen(this.permissionObj, 'update').length
      len+=1
      let widthBase = 90
      let quickReplyLen = vm.authFilterLen(this.permissionObj, 'update', 'quickReply').length
      if([1,2].includes(quickReplyLen)){
        widthBase = 60
      }
      return len > 0 ? vm.multiply(len,widthBase) : minWidth
      // if(this.formInline.is_technical == 1) {
      //   return len > 0 ? vm.multiply(len, widthBase) + 60 : minWidth
      // }else {
      //   return len > 0 ? vm.multiply(len,widthBase) : minWidth
      // }
    },

  },
  // 虚拟列表 start
  mounted() {
    /** 控制table的高度 */
    const vm = this
    // resize窗口节流
    window.addEventListener("resize", vm.throttleNew(vm.updateTableHeight, 300))

    // 配置列
    // 发请求得到checkListInitData的列的名字
    let columnSet = 'columnSet'+this.formInline.is_technical
    if(localStorage.getItem(columnSet)){
      this.checkList = JSON.parse(localStorage.getItem(columnSet))
    }else{
      this.checkList = {
        id: true,
        brand: true,
        model: true,
        sn: true,
        sn1: true,
        firmwareArea: true,
        firmwareVersion: true,
        userCountry: true,
        phone: true,
        email: true,
        questionTime: true,
        updateTime: true,
        consultationStatus: true,
        typeName: true,
        processor: true,
        module: true,
        // problem: true,
      };
    }
  },
  // vue设置列表高度自适应和show-summary的冲突
  updated() {
    const vm = this
    if(vm.showSummary){
      vm.$nextTick(()=>{
        vm.$refs['multipleTable'].doLayout()
      })
    }
  },
  beforeDestroy() {
    const vm = this
    window.removeEventListener('resize', vm.updateTableHeight)
  },
  // 虚拟列表 end
  // 配置列
  watch: {
    // 监听复选框配置列所有的变化
    checkList: {
      handler: function (newnew, oldold) {
        // console.log(newnew);
        this.showColumn = newnew;
        // 这里需要让表格重新绘制一下，否则会产生固定列错位的情况  这一步至关重要
        this.$nextTick(() => {
          this.$refs.multipleTable.doLayout();
        });
      },
      deep: true,
      immediate: true
    },
  },

  /**
   * 里面的方法只有被调用才会执行
   */
  methods: {
    // 虚拟列表 start
    /**
     * 虚拟列表 更新表高
     */
    updateTableHeight() {
      const vm = this
      // console.log('vm.tableHeight', vm.tableHeight)
      const offsetHei = document.documentElement.clientHeight
      // const removeHeight = this.filterObj.length > 0 ? 285 : 254
      const removeHeight = 302
      vm.tableHeight = offsetHei - removeHeight
    },
    // 虚拟列表 end
    // 带输入建议
    // 带输入建议
    handleSelect(item) {
      const vm = this
      vm.editForm={
        ...vm.editForm,
        content: item.value
      }
    },
    //获取快捷回复列表
    quickreplyListGet(){
      const vm = this

      /***
       * 调用接口，注释上面模拟数据 取消下面注释
       */
      this.apiUrl.quickreplyListGet()
        .then(res => {
          let { code, data:{
            list=[]
          } } = res;
          if(code == 0){
            if(list){
              list = list.map(item=>{
                return {
                  ...item,
                  label: item.label,
                  value: item.label,
                }
              })
              vm.contentList = list;
            }
          }
        })
    },
    //自定义搜索框列表
    feedbacksearchList(){
      const vm = this
      let param = {
        userId: vm.userInfo.userId,
        is_technical: vm.formInline.is_technical,
      }
      /***
       * 调用接口，注释上面模拟数据 取消下面注释
       */
      this.apiUrl.feedbacksearchList(param, 'POST')
        .then(res => {
          const { code,
            data: {
              list = [],
              brandList = [],
              modelList = [],
              typeList = [],
              serchAllList = [],
            },
            msg } = res;
          if (code != 0) {
            this.$message({
              type: 'error',
              message: msg
            })
          } else {

            if(list&&list.length>0){
              vm.formItemList = list[0].serchList;
              vm.editAdvanced = list[0];
              vm.serchAllList = serchAllList;
            }
            if(brandList&&brandList.length>0){
              this.brandList = brandList;
              if(vm.exportExcelArray && vm.exportExcelArray.length > 0){
                vm.exportExcelArray = vm.exportExcelArray.map(item=>{
                  if(item.prop == 'brand'){
                    item.formatterInfo = vm.brandList
                  }
                  return {
                    ...item
                  }
                })
              }
            }
            if(modelList&&modelList.length>0){
              this.modelList = modelList;
              if(vm.exportExcelArray && vm.exportExcelArray.length > 0){
                vm.exportExcelArray = vm.exportExcelArray.map(item=>{
                  if(item.prop == 'model'){
                    item.formatterInfo = vm.modelList
                  }
                  return {
                    ...item
                  }
                })
              }
            }
            if(typeList&&typeList.length>0){
              this.typeList = typeList;
              if(vm.exportExcelArray && vm.exportExcelArray.length > 0){
                vm.exportExcelArray = vm.exportExcelArray.map(item=>{
                  if(item.prop == 'type'){
                    item.formatterInfo = vm.typeList
                  }
                  return {
                    ...item
                  }
                })
              }
            }

          }
        })
    },
    //获取品牌分类
    phonebrandsList(){
      const vm = this

      /***
       * 调用接口，注释上面模拟数据 取消下面注释
       */
      this.apiUrl.phonebrandsList()
        .then(res => {
          const { code, data = [], msg } = res;
          if (code != 0) {
            this.$message({
              type: 'error',
              message: msg
            })
          } else {
            if(data){
              this.brandList = data;
              if(vm.exportExcelArray && vm.exportExcelArray.length > 0){
                vm.exportExcelArray = vm.exportExcelArray.map(item=>{
                  if(item.prop == 'brand'){
                    item.formatterInfo = vm.brandList
                  }
                  return {
                    ...item
                  }
                })
              }
            }
          }
        })
    },
    //获取型号
    phonemodelList(){
      const vm = this

      /***
       * 调用接口，注释上面模拟数据 取消下面注释
       */
      this.apiUrl.phonemodelList()
        .then(res => {
          const { code, data = [], msg } = res;
          if (code != 0) {
            this.$message({
              type: 'error',
              message: msg
            })
          } else {
            if(data){
              this.modelList = data;
              if(vm.exportExcelArray && vm.exportExcelArray.length > 0){
                vm.exportExcelArray = vm.exportExcelArray.map(item=>{
                  if(item.prop == 'model'){
                    item.formatterInfo = vm.modelList
                  }
                  return {
                    ...item
                  }
                })
              }
            }
          }
        })
    },
    //获取渠道
    channelListGet(){
      const vm = this

      /***
       * 调用接口，注释上面模拟数据 取消下面注释
       */
      this.apiUrl.channelListGet()
        .then(res => {
          const { code, data = [], msg } = res;
          if (code != 0) {
            this.$message({
              type: 'error',
              message: msg
            })
          } else {
            if(data){
              this.channelList = data;
              if(vm.exportExcelArray && vm.exportExcelArray.length > 0){
                vm.exportExcelArray = vm.exportExcelArray.map(item=>{
                  if(item.prop == 'channel'){
                    item.formatterInfo = vm.channelList
                  }
                  return {
                    ...item
                  }
                })
              }
            }
          }
        })
    },
    // 获取发票库存列表
    getData(parameter) {
      const vm = this
      vm.loading = true

      /***
       * 调用接口，注释上面模拟数据 取消下面注释
       */
      vm.apiUrl[vm.exportExcelRequest](parameter,"POST")
        .then(res => {
          vm.loading = false
          const { data:{list=[],totalnum},code, msg } = res
          if (code != 0) {
            vm.showMessageMin({
              message: msg,
              type: 'error',
            })
          } else {
            if(list&&list.length>0){
              const arr = list.map((item) => {
                const typeName = vm.typeList&&vm.typeList.length&&vm.typeList[item.type - 1] ?
                  vm.typeList[item.type - 1].label : ''
                return {
                  ...item,
                  typeName: typeName,
                  showEd: item.consultationStatus == '处理中',
                  showGreen: item.consultationStatus == '已回复'
                }
              })
              // vm.listData = arr
              // 合并小格
              vm.listData = vm.groupBy(arr, vm.mergeName)
              // console.log('vm.listData', vm.listData)
            }else {
              vm.listData = []
            }
            // 分页赋值
            vm.pageparm.currentPage = vm.formInline.page
            vm.pageparm.pageSize = vm.formInline.pagenum
            vm.pageparm.total = totalnum

          }
        })
        .catch(err => {
          if(err&&err.isCancel) return
          vm.loading = false
        })
    },
    // 分页插件事件
    callFather(parm) {
      const vm = this
      vm.formInline = {
        ...vm.formInline,
        page: parm.currentPage,
        pagenum: parm.pageSize
      }
      vm.getData(vm.formInline)
    },
    // 搜索事件
    search(formInline) {
      const vm = this
      vm.formInline = {
        ...vm.formInline,
        ...formInline,
        page: 1
      }
      vm.getData(vm.formInline)
    },
    //跳转回复详情
    handleEdit: function(row) {
      const vm = this
      const path = '/feedback/feedbackDetail?fromPage='
        +(vm.formInline&&vm.formInline.is_technical == 1 ? 'technicalFeedbackeedback' : 'feedbackList')
        +'&labelTitle='
        +(vm.formInline&&vm.formInline.is_technical == 1 ? '技术反馈列表记录' : '反馈列表')
        +'&labelPath='
        +(vm.formInline&&vm.formInline.is_technical == 1 ? '/feedback/technicalFeedbackeedback' : '/feedback/feedbackList')
        +'&id='+row.id
        +'&permissionObj='+JSON.stringify(vm.permissionObj)
      vm.routerPush(path)
    },
    // 显示编辑界面保存方法
    submitForm(editData) {
      const vm = this
      vm.$refs[editData].validate(valid => {
        if (valid) {

          let request = null
          let param = {}
          if(editData == 'editForm'){
            param = {
              ...vm.editForm,
              isReply: 1,
              processor: vm.userInfo.userName
            }
            if(vm.title == '快捷回复'){
              param = vm.objfilter(param,['id','content','consultationStatus','imagesList', 'videosList']);
              request = vm.apiUrl.feedbackReply(param,"POST")
            }else {
              if(vm.multipleSelection.length == 0){
                vm.$message.error('请勾选操作项')
                return;
              }
              //将选中项传给this.tableAllData
              //测试数组导出
              const ids = vm.multipleSelection.map((item)=>{
                return item.id
              })
              if(ids.length>0){
                param.ids = ids
                param.consultationStatus = '已回复'
              }
              request = vm.apiUrl.feedbackBatchReply(param,"POST")
            }
          }else if(editData == 'editAdvanced'){
            const serchList = vm.arrIntersection(vm.serchAllList,vm.editAdvanced.serchName)
            param = {
              ...vm.editAdvanced,
              serchList: serchList,
              userId: vm.userInfo.userId,
              is_technical: vm.formInline.is_technical,
            }
            request = vm.apiUrl.feedbacksearchEdit(param,"POST")
          }

          vm.openFullScreen()
          request.then(res => {
            vm.closeFullScreen(vm.openFullScreen());
            const { code, msg } = res
            if (code != 0) {
              vm.showMessageMin({
                message: msg,
                type: 'error',
              })
            } else {
              if(editData == 'editForm'){
                vm.editFormVisible = false
              }else if(editData == 'editAdvanced'){
                vm.feedbacksearchList();
                vm.editFormVisibleAdvanced = false
              }

              vm.showMessageMin({
                message: vm.title+'成功！',
                type: 'success',
              })
              vm.getData(vm.formInline)
            }
          })
        } else {
          return false
        }
      })
    },
    // 关闭编辑、增加弹出框
    clearValidate(formName){
      if(!this.$refs[formName]) return
      this.$refs[formName].clearValidate()
    },
    //同时清除表单数据或重置表单状态
    clearForm(formName) {
      // 清空表单数据或重置表单状态的操作

      // 示例1：清空表单数据
      Object.keys(this[formName]).forEach((key) => {
        this[formName][key] = '';
      });

      // 示例2：重置表单状态（包括校验）
      if (this.$refs[formName] !== undefined && typeof this.$refs[formName].resetFields === 'function') {
        this.$refs[formName].resetFields();
      }
    },
    closeDialog(formName) {
      if(formName == 'editForm'){
        this.initData()
        this.resetForm(formName);
        this.editFormVisible = false
      }else if(formName == 'editAdvanced'){
        this.resetForm(formName);
        this.editFormVisibleAdvanced = false
      }
    },

    //导出excel
    // 上传excel成功
    async onSuccess(data) {
      // console.log(data);
      const vm = this
      // 数据库的key为英文，我们上传的key为中文，需要一一转化
      const userRelations = Object.fromEntries(vm.exportExcelArray.map((item)=>{
        return [item.label,item.prop]
      }))
      console.log('obj', obj)
      // 将key值一一对应
      const newArr = data.results.map((item) => {
        let userInfo = {};
        Object.keys(item).forEach((key) => {
          if(userRelations[key]){
            userInfo[userRelations[key]] = item[key];
          }
          // userInfo[userRelations[key]] = item[key];
        });
        return userInfo;
      });

      // const newArr = data.results

      console.log(newArr);
      const param = {
        excelFrom: 'BillingPlan',
        excelList: newArr,
      }
      //   await importEmployee(param); // 调用上传接口
      vm.showMessageMin({
        message: '上传文件成功',
        type: 'success',
      })
      vm.isShow = false;
    },
    resetForm(formName) {
      const vm = this
      if(!vm.$refs[formName]) return
      vm.$refs[formName].resetFields();
    },
    // 转为常见
    turnProblem(row) {
      const vm = this
      const param = {
        id: row.id
      }
      vm.$confirm('确定要转为常见问题吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          vm.openFullScreen()
          vm.apiUrl.turnProblem(param,"POST")
            .then(res => {
              vm.closeFullScreen(vm.openFullScreen());
              const { code, msg } = res;
              if (code == 0) {
                vm.showMessageMin({
                  message: '已转为常见问题!',
                  type: 'success',
                })
                vm.getData(vm.formInline)
              } else {
                vm.showMessageMin({
                  message: msg,
                  type: 'error',
                })
              }
            })
        })
        .catch(() => {
          vm.showMessageMin({
            message: '已取消转为常见问题',
            type: 'info',
          })
        })
    },
    // 转为技术反馈
    turnTechnical(row) {
      const vm = this
      const param = {
        id: row.id
      }
      vm.$confirm('确定要转为技术反馈吗?', '信息', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          vm.openFullScreen()
          vm.apiUrl.turnTechnical(param,"POST")
            .then(res => {
              vm.closeFullScreen(vm.openFullScreen());
              const { code, msg } = res;
              if (code == 0) {
                vm.showMessageMin({
                  message: '已转为技术反馈!',
                  type: 'success',
                })
                vm.getData(vm.formInline)
              } else {
                vm.showMessageMin({
                  message: msg,
                  type: 'error',
                })
              }
            })
        })
        .catch(() => {
          vm.showMessageMin({
            message: '已取消转为技术反馈',
            type: 'info',
          })
        })
    },
    //需要特殊格式totalRow+list
    resultFormat(res){
      const vm = this
      const { code, data:{
        list=[],totalnum=0
      } } = res
      if(code==0&&list&&list.length>0) {
        let obj = {
          totalRow: totalnum,
          list:list,
          // list:list.map((item)=>{
          //   return {
          //     ...item,
          //     label: item.short+item.name,
          //   }
          // })
        }
        return obj
      }else {
        return
      }
    },
    handelSingleValues(data){
      console.log('handelSingleValues',data)
      if(data&&data.length>0){
        this.editForm.content = data[0].label
      }
    },
    //显示编辑界面
    quickReplyEdit: function(row,title) {
      const vm = this
      vm.title = title
      if(row){
        vm.editForm = {
          ...row,
          content: ''
        }
      }
      this.$nextTick(()=>{
        this.clearValidate('editForm')
      })
      vm.editFormVisible = true
    },
    initData(){
      const vm = this
      vm.editForm = {
        ...vm.editForm,
        content: '',
        imagesList: [],
        videosList: [],
      }
      this.$refs.uploadSlice.clearFiles();
      this.$refs.uploadSec.clearFiles();
      //v-selectPage清空问题
      // vm.$refs.selectpageRefs.remove()

    },
    getPhoto(e){
      const vm = this
      vm.editForm = {
        ...vm.editForm,
        imagesList: e,
      }
      console.log("this.editForm.imagesList",this.editForm.imagesList)
    },
    getVideos(e){
      const vm = this
      vm.editForm = {
        ...vm.editForm,
        content: '',
        videosList: e,
      }
      console.log("this.editForm.videosList",this.editForm.videosList)
    },
    // 添加搜索框
    async advancedSearch() {
      const vm = this
      vm.title = '添加搜索框'
      await  this.sleep(100)
      vm.editFormVisibleAdvanced = true
    },
    // 配置列
    handleClick(row) {
      console.log(row);
    },
    hideColumnOption() {
      this.isShowColumn = false;
    },
    showColumnOption() {
      this.isShowColumn = true;
    },
    saveColumn() {
      let columnSet = 'columnSet'+this.formInline.is_technical
      localStorage.setItem(columnSet,JSON.stringify(this.checkList))
      this.hideColumnOption();
    },
    // 全选
    // handleCheckAllChange(val) {
    //   Object.keys(this.checkList).forEach( (key) => {
    //     if ( typeof this.checkList[key] !== 'object' ) {
    //       this.checkList[key] = val
    //     }
    //   });
    //   this.isIndeterminate = val ? true : false;
    // },


  }
}
</script>

<style lang="less" scoped>
@import '~@/assets/css/table.less';
// 配置列
.columnOption {
  position: fixed;
  z-index: 20;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.3);
  display: flex;
  flex-direction: row-reverse;
  .content {
    width: 100px;
    height: 100%;
    background-color: rgb(203, 223, 198);
    .head {
      width: 100%;
      height: 44px;
      border-bottom: 1px solid #000;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 12px;
    }
    .body {
      width: 100%;
      height: calc(100% - 88px);
      box-sizing: border-box;
      padding-top: 10px;
      overflow-y: auto;
      .items {
        width: 100%;
        height: 100%;
        overflow-y: auto;
        display: flex;
        flex-direction: column;
        .el-checkbox {
          width: 100%;
          height: 28px;
          line-height: 28px;
          margin-bottom: 14px;
          display: inline-block;
          font-family: PingFang SC;
          font-style: normal;
          font-weight: normal;
          font-size: 14px;
          color: #000;
          overflow: hidden;
          text-overflow: ellipsis;
          white-space: nowrap;
          box-sizing: border-box;
          padding-left: 14px;
        }
        .el-checkbox:hover {
          background-color: #f5f7fa;
        }
      }
    }
    .footer {
      width: 100%;
      height: 44px;
      border-top: 1px solid #000;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
// 控制淡入淡出效果
.fade-enter-active,
.fade-leave-active {
  transition: opacity 0.3s;
}
.fade-enter,
.fade-leave-to {
  opacity: 0;
}
</style>
